import React from 'react';
import { Button, Form, Input, Modal, Select, Table } from 'antd';
import { fakeAnswerRelevanceDataForHot } from '@/services/datastatistics';
import menuCheck from '@/utils/menuCheck';

class HotRelatedModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      loading: false,
      list: [],
      total: 0,
      current: 1,
      size: 10,
      type: 1,
      search: '',
    };
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this);
    }
  }

  initRelatedModal = () => {
    this.setState({ visible: true }, () => this.getRelatedData());
  };

  /* 获取数据 */
  getRelatedData = () => {
    this.setState({ loading: true }, async () => {
      const { current, size, type, search } = this.state;
      const { applicationId } = this.props;
      const res = await fakeAnswerRelevanceDataForHot({ current, size, type, search, applicationId });
      this.setState({
        list: res.records ? res.records : [],
        total: res.total,
        loading: false,
      });
    });
  };

  /* 条件查询 */
  queryByForm = () => {
    const info = this.props.form.getFieldsValue();
    this.setState(
      {
        type: info.type,
        search: info.search ? info.search : '',
        current: 1,
      },
      () => {
        this.getRelatedData();
      }
    );
  };

  handelSelectChange = (value) => {
		this.setState({ current: 1, type: value }, () => {
			this.getRelatedData();
		});
	};

  /* 分页 */
  handelTablePageChange = current => {
    this.setState({ current }, () => {
      this.getRelatedData();
    })
  }

  /* 关闭弹框 */
  cancelRelatedModal = () => {
    this.setState(
      {
        visible: false,
        loading: false,
        list: [],
        total: 0,
        current: 1,
        size: 10,
        type: 1,
        search: '',
      },
      () => {
        this.props.form.resetFields();
      }
    );
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { visible, list, total, current, size, loading, type } = this.state;
    const { questions } = this.props;
    const questionIds = questions.map(item => item.id);
    const columns = [
      {
        title: '标准问',
        dataIndex: 'basicQuestion',
        key: 'basicQuestion',
        width: 200,
        align: 'center',
      },
      {
        title: '所属分类',
        dataIndex: 'categoryNamePath',
        key: 'categoryNamePath',
        width: 200,
        align: 'center',
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: 100,
        align: 'center',
        render: (text, record) => {
          return (
            <div>
              {questionIds.indexOf(record.id) === -1 ? (
                <Button
                  type={'primary'}
                  size={'small'}
                  onClick={() => this.props.addQuestionByHot(record, type)}
                >
                  添加
                </Button>
              ) : (
                <Button
                  size={'small'}
                  style={{ background: '#CCCCCC', color: '#ffffff', border: 0 }}
                  onClick={() => this.props.removeRelatedQus(record)}
                >
                  取消添加
                </Button>
              )}
            </div>
          );
        },
      },
    ];
    return (
      <Modal
        title={'添加问题'}
        visible={visible}
        width={600}
        footer={null}
        onCancel={this.cancelRelatedModal}
      >
        <Form layout={'inline'} style={{ marginBottom: 20 }}>
          <Form.Item>
            {getFieldDecorator('type', { initialValue: 1 })(
              <Select style={{ width: 120 }} onChange={this.handelSelectChange}>
                <Select.Option value={1}>问答知识点</Select.Option>
                <Select.Option value={2}>导图知识点</Select.Option>
                <Select.Option value={3}>多轮对话</Select.Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('search')(
              <Input.Search
                style={{ width: 300 }}
                placeholder={'请输入知识点标准问'}
                onSearch={this.queryByForm}
              />
            )}
          </Form.Item>
          <Form.Item>
            <Button onClick={this.queryByForm}>查询</Button>
          </Form.Item>
        </Form>

        <Table
          columns={columns}
          dataSource={list}
          loading={loading}
          bordered
          rowKey={'id'}
          pagination={{
            pageSize: size,
            onChange: this.handelTablePageChange,
            current: current,
            total,
          }}
          scroll={{ y: 400 }}
        />
      </Modal>
    );
  }
}

export default Form.create()(HotRelatedModal);
